<template>
  <div>
    <el-button
      type="primary"
      style="float: left; position: fixed; left: 0; bottom: 0"
      :disabled="current == 1 ? true : false"
      @click="back"
    >
      上一页
    </el-button>
    <el-button
      type="primary"
      style="float: right; position: fixed; right: 0; bottom: 0"
      :disabled="current == Math.ceil(this.total / this.limit) ? true : false || total == 0"
      @click="next"
    >
      下一页
    </el-button>
    <div class="space">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="box-card">
            <div class="clearfix">
              <el-image v-if="isMe" :src="$store.state.user.avatar"></el-image>
              <el-image v-else :src="currentUser.avatar"></el-image>
            </div>
            <el-divider></el-divider>
            <div
              style="display: flex; justify-content: center"
              class="text item"
            >
              <span v-if="isMe" style="font-weight: bold">{{$store.state.user.nickname}}
                <i v-if="$store.state.user.isCamera === 1" style="margin-left: 10px;" class="el-icon-camera"/></span>
              <span v-else style="font-weight: bold">{{
                currentUser.nickname
              }}</span>
            </div>
            <el-divider></el-divider>
            <el-row :gutter="24" class="bottom">
              <el-col
                @click.native="goFollowList"
                style="cursor: pointer"
                :span="8"
              >
                关注数量 <br />
                <span v-if="isMe">{{ $store.state.user.followNum }}</span>
                <span v-else>{{ currentUser.followNum }}</span>
              </el-col>
              <el-col
                @click.native="goFanList"
                style="cursor: pointer"
                :span="8"
              >
                粉丝数量 <br />
                <span v-if="isMe">{{ $store.state.user.fanNum }}</span>
                <span v-else>{{ currentUser.fanNum }}</span>
              </el-col>
              <el-col
                @click.native="goCollectList"
                style="cursor: pointer"
                :span="8"
              >
                收藏数量 <br />
                <span v-if="isMe">{{ $store.state.user.collectNum }}</span>
                <span v-else>{{ currentUser.collectNum }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="bottom" style="margin-top: 5px">
              <el-col
                @click.native="goGoodList"
                style="cursor: pointer"
                :span="8"
              >
                点赞数量 <br />
                <span v-if="isMe">{{ $store.state.user.goodNum }}</span>
                <span v-else>{{ currentUser.goodNum }}</span>
              </el-col>
              <el-col
                @click.native="goActivityList"
                style="cursor: pointer"
                :span="8"
              >
                活动数量 <br />
                <span v-if="isMe">{{ $store.state.user.joinNum }}</span>
                <span v-else>{{ currentUser.joinNum }}</span>
              </el-col>
              <el-col v-if="!isMe" :span="8" style="cursor: pointer">
                <el-button
                  @click="followFan"
                  v-if="isFollowCurrentUser === 1"
                  type=""
                  >已关注</el-button
                >
                <el-button @click="followFan" v-if="isFollowCurrentUser === 0"
                  >已互粉</el-button
                >
                <el-button @click="followFan" v-if="isFollowCurrentUser === 2"
                  >关注</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col v-if="isFollow" :span="18">
          <el-card class="box-card">
            <div class="clearfix">
              <span v-if="isMe">我的关注</span>
              <span v-else>他的关注</span>
            </div>
            <el-divider></el-divider>
            <div class="text item">
              <div v-for="(item, index) in followList" :key="index">
                <el-row :gutter="24">
                  <el-col :span="2">
                    <el-avatar
                      style="cursor: pointer"
                      @click.native="showInfo(item.user.userId)"
                      :src="item.user.avatar"
                    ></el-avatar>
                  </el-col>
                  <el-col style="float: left" :span="12">
                    <span>{{ item.user.nickname }}</span> <br />
                    <span>{{ item.user.signature }}</span>
                  </el-col>
                  <el-col :span="10" v-if="isMe">
                    <el-button
                      @click="
                        followFanList(followIds[index], item.user.userId, 0)
                      "
                      v-if="followIds[index] === 1"
                      style="float: right"
                      >已关注</el-button
                    >
                    <el-button
                      @click="
                        followFanList(followIds[index], item.user.userId, 0)
                      "
                      v-if="followIds[index] === 0"
                      style="float: right"
                      >已互粉</el-button
                    >
                    <el-button
                      @click="
                        followFanList(followIds[index], item.user.userId, 0)
                      "
                      v-if="followIds[index] === 2"
                      style="float: right"
                      >关注</el-button
                    >
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="isFan" :span="18">
          <el-card class="box-card">
            <div class="clearfix">
              <span v-if="isMe">我的粉丝</span>
              <span v-else>他的粉丝</span>
            </div>
            <el-divider></el-divider>
            <div class="text item">
              <div v-for="(item, index) in fanList" :key="index">
                <el-row :gutter="24">
                  <el-col :span="2">
                    <el-avatar
                      style="cursor: pointer"
                      @click.native="showInfo(item.user.userId)"
                      :src="item.user.avatar"
                    ></el-avatar>
                  </el-col>
                  <el-col style="float: left" :span="12">
                    <span>{{ item.user.nickname }}</span> <br />
                    <span>{{ item.user.signature }}</span>
                  </el-col>
                  <!-- 1,  -->
                  <el-col :span="10" v-if="isMe">
                    <el-button
                      @click="followFanList(fanIds[index], item.user.userId, 1)"
                      v-if="fanIds[index] === 3"
                      style="float: right"
                      >已关注</el-button
                    >
                    <el-button
                      @click="followFanList(fanIds[index], item.user.userId, 1)"
                      v-if="fanIds[index] === 0"
                      style="float: right"
                      >已互粉</el-button
                    >
                    <el-button
                      @click="followFanList(fanIds[index], item.user.userId, 1)"
                      v-if="fanIds[index] === 2 || fanIds[index] === 1"
                      style="float: right"
                      >关注</el-button
                    >
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="isCollect" :span="18">
          <el-card class="box-card">
            <div class="clearfix">
              <span v-if="isMe">我的收藏</span>
              <span v-else>他的收藏</span>
              <el-divider></el-divider>
              <div>
                <el-row style="font-weight: bold" :gutter="24">
                  <el-col :span="14">标题</el-col>
                  <el-col :span="6">时间</el-col>
                  <el-col :span="4">点赞数</el-col>
                </el-row>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="text item">
              <div v-for="(item, index) in collectList" :key="index">
                <el-row :gutter="24">
                  <el-col :span="14">
                    <el-link @click="goWorkInfo(item.cameraWork.workId)" type="primary">{{
                      item.cameraWork.header
                    }}</el-link>
                  </el-col>
                  <el-col style="float: left" :span="6">
                    <span>{{ item.cameraWork.gmtCreate }}</span>
                  </el-col>
                  <el-col :span="4">
                    <span>{{ item.cameraWork.goodNum }}</span>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="isGood" :span="18">
          <el-card class="box-card">
            <div class="clearfix">
              <span v-if="isMe">我的点赞</span>
              <span v-else>他的点赞</span>
              <el-divider></el-divider>
              <div>
                <el-row style="font-weight: bold" :gutter="24">
                  <el-col :span="14">标题</el-col>
                  <el-col :span="6">时间</el-col>
                  <el-col :span="4">点赞数</el-col>
                </el-row>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="text item">
              <div v-for="(item, index) in goodList" :key="index">
                <el-row :gutter="24">
                  <el-col :span="14">
                    <el-link @click="goWorkInfo(item.cameraWork.workId)" type="primary">{{
                      item.cameraWork.header
                    }}</el-link>
                  </el-col>
                  <el-col style="float: left" :span="6">
                    <span>{{ item.cameraWork.gmtCreate }}</span>
                  </el-col>
                  <el-col :span="4">
                    <span>{{ item.cameraWork.goodNum }}</span>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="isActivity" :span="18">
          <el-card class="box-card">
            <div class="clearfix">
              <span v-if="isMe">我的活动</span>
              <span v-else>他的活动</span>
              <el-divider></el-divider>
              <div>
                <el-row style="font-weight: bold" :gutter="24">
                  <el-col :span="4">图标</el-col>
                  <el-col :span="16">标题</el-col>
                  <el-col :span="4">参与人数</el-col>
                </el-row>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="text item">
              <div v-for="(item, index) in activityList" :key="index">
                <el-row :gutter="24">
                  <el-col :span="4">
                    <el-avatar style="cursor: pointer;" @click.native="goActivityInfo(item.activity.activityId)" :src="item.activity.activityUrl" type="primary"></el-avatar>
                  </el-col>
                  <el-col style="float: left" :span="16">
                    <span>{{ item.activity.activityName }}</span>
                  </el-col>
                  <el-col :span="4">
                    <span>{{ item.activity.joinNumber }}</span>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="currentUser.isCamera === 1 || (this.$store.state.user.isCamera === 1 && isMe)" :span="18" 
        style="margin-top: 10px;float: right;">
          <el-card class="box-card">
            <span style="font-weight: bold;">摄影师信息</span>
            <el-divider></el-divider>
            <el-form disabled :model="camerist" label-width="80px">
              <el-form-item label="电话">
                <el-input v-model="camerist.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="camerist.email"></el-input>
              </el-form-item>
              <el-form-item label="证件照">
                <img :src="camerist.identify" style="width: 300px; height: 300px" />
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import follow from "@/api/follow";
import collect from "@/api/collect";
import good from "@/api/good";
import user from "@/api/user";
import store from "@/store";
import join from "@/api/join";

export default {
  data() {
    return {
      followList: [],
      fanList: [],
      collectList: [],
      goodList: [],
      activityList: [],
      followListPage: [],
      fanListPage: [],
      collectListPage: [],
      goodListPage: [],
      activityListPage: [],
      isFollow: false,
      isFan: false,
      isActivity: true,
      isCollect: false,
      isGood: false,
      userId: 0,
      isMe: false,
      currentUser: {},
      isFollowCurrentUser: 2,
      dataFollow: 2,
      followIds: [],
      fanIds: [],
      followIdsPage: [],
      fanIdsPage: [],
      current: 1, //页码
      limit: 4, //每页多少行
      total: 0, //总记录数,
      camerist: {
        phone: this.$store.state.user.phone,
        email: this.$store.state.user.email,
        identify: this.$store.state.user.identify
      },
    };
  },

  created() {
    this.init()
  },

  watch: {
    $route() {
      if (this.$route.query.id || this.$route.query) {
        this.init()
      }
    },
  },

  methods: {
    init() {
      if (
        this.$route.query &&
        this.$route.query.id &&
        this.$route.query.id != this.$store.state.user.userId
      ) {
        this.userId = this.$route.query.id;
        this.isMe = false;
        this.isFollowCurrent();
        this.getCurrentUser();
      } else if (this.$store.state.user.userId != 0) {
        this.userId = this.$store.state.user.userId;
        this.isMe = true;
        this.getCurrentUser();
      }
      this.goActivityList();
    },

    getCurrentUser() {
      user.getUserById(this.userId).then((res) => {
        this.currentUser = res.data.user;
      });
    },
    followFan() {
      if (this.$store.state.user.userId !== 0) {
        if (this.dataFollow == 2) {
          this.goFollowCurrent();
          this.isFollowCurrentUser = 1;
        } else if (this.dataFollow == 3) {
          this.goFollowCurrent();
          this.isFollowCurrentUser = 0;
        } else {
          this.goUnFollowCurrent();
          this.isFollowCurrentUser = 2;
        }
      } else {
        this.$message({
          message: "请先登录",
          type: "info",
        });
        this.$router.push({ path: "/login" });
      }
    },
    followFanList(index, userId, is) {
      if (is === 0) {
        if (index == 0 || index == 1) {
          follow.unFollow(this.$store.state.user.userId, userId).then((res) => {
            if (res.success) {
              this.goFollowList();
              this.getCurrentUser();
              store.commit("setFollowNumSubtract");
            }
          });
        } else {
          follow.follow(this.$store.state.user.userId, userId).then((res) => {
            if (res.success) {
              this.goFollowList();
              this.getCurrentUser();
              store.commit("setFollowNumAdd");
            }
          });
        }
      } else {
        if (index == 0 || index == 3) {
          follow.unFollow(this.$store.state.user.userId, userId).then((res) => {
            if (res.success) {
              this.goFollowList();
              this.getCurrentUser();
              store.commit("setFollowNumSubtract");
            }
          });
        } else {
          follow.follow(this.$store.state.user.userId, userId).then((res) => {
            if (res.success) {
              this.goFollowList();
              this.getCurrentUser();
              store.commit("setFollowNumAdd");
            }
          });
        }
      }
    },
    goFollowCurrent() {
      follow.follow(this.$store.state.user.userId, this.userId).then((res) => {
        if (res.success) {
          this.getCurrentUser();
          this.isFollowCurrent();
          store.commit("setFollowNumAdd");
        }
      });
    },
    goUnFollowCurrent() {
      follow
        .unFollow(this.$store.state.user.userId, this.userId)
        .then((res) => {
          if (res.success) {
            this.getCurrentUser();
            this.isFollowCurrent();
            store.commit("setFollowNumSubtract");
          }
        });
    },
    isFollowCurrent() {
      follow
        .isTogether(this.$store.state.user.userId, this.userId)
        .then((res) => {
          if (res.success) {
            this.dataFollow = res.data.together;
            if (this.dataFollow == 0) {
              this.isFollowCurrentUser = 0;
            } else if (this.dataFollow == 1) {
              this.isFollowCurrentUser = 1;
            } else {
              this.isFollowCurrentUser = 2;
            }
          }
        });
    },
    goFollowList() {
      this.selectFollow();
      follow.getFollow(this.userId).then((res) => {
        this.followList = res.data.followList;
        this.followListPage = res.data.followList;
        this.followIds = res.data.followIds;
        this.followIdsPage = res.data.followIds;
        this.total = this.followList.length;
        this.current = 1;
        this.pageSlice();
      });
    },
    goFanList() {
      this.selectFan();
      follow.getFan(this.userId).then((res) => {
        this.fanList = res.data.fanList;
        this.fanListPage = res.data.fanList;
        this.fanIds = res.data.fanIds;
        this.fanIdsPage = res.data.fanIds;
        this.total = this.fanList.length;
        this.current = 1;
        this.pageSlice();
      });
    },
    goCollectList() {
      this.selectCollect();
      collect.getCollect(this.userId).then((res) => {
        this.collectList = res.data.collectList;
        this.collectListPage = res.data.collectList;
        this.total = this.collectList.length;
        this.current = 1;
        this.pageSlice();
      });
    },
    goGoodList() {
      this.selectGood();
      good.getGood(this.userId).then((res) => {
        this.goodList = res.data.goodList;
        this.goodListPage = res.data.goodList;
        this.total = this.goodList.length;
        this.current = 1;
        this.pageSlice();
      });
    },
    goActivityList() {
      this.selectActivity();
      join.getActivityById(this.userId).then((res) => {
        this.activityList = res.data.joinList;
        this.activityListPage = res.data.joinList;
        this.total = this.activityList.length;
        this.current = 1;
        this.pageSlice();
      });
    },
    selectFollow() {
      this.isFollow = true;
      this.isFan = false;
      this.isActivity = false;
      this.isCollect = false;
      this.isGood = false;
    },
    selectFan() {
      this.isFan = true;
      this.isFollow = false;
      this.isActivity = false;
      this.isCollect = false;
      this.isGood = false;
    },
    selectCollect() {
      this.isFan = false;
      this.isFollow = false;
      this.isActivity = false;
      this.isCollect = true;
      this.isGood = false;
    },
    selectGood() {
      this.isFan = false;
      this.isFollow = false;
      this.isActivity = false;
      this.isCollect = false;
      this.isGood = true;
    },
    selectActivity() {
      this.isFan = false;
      this.isFollow = false;
      this.isActivity = true;
      this.isCollect = false;
      this.isGood = false;
    },
    back() {
      this.current -= 1;
      this.pageSlice();
    },
    next() {
      this.current += 1;
      this.pageSlice();
    },
    sliceArr(arr) {
      let newObj = [];
      for (let i in arr) {
        newObj[i] = arr[i];
      }
      return newObj.slice(
        (this.current - 1) * this.limit,
        this.current * this.limit
      );
    },
    pageSlice() {
      if (this.isFan) {
        let copyFanlist = this.fanListPage;
        let copyFanIds = this.fanIdsPage;
        this.fanList = this.sliceArr(copyFanlist);
        this.fanIds = this.sliceArr(copyFanIds);
      } else if (this.isFollow) {
        let copyFollowList = this.followListPage;
        let copyFollowIds = this.followIdsPage;
        this.followList = this.sliceArr(copyFollowList);
        this.followIds = this.sliceArr(copyFollowIds);
      } else if (this.isCollect) {
        let copyCollectList = this.collectListPage;
        this.collectList = this.sliceArr(copyCollectList);
      } else if (this.isGood) {
        let copyGoodList = this.goodListPage;
        this.goodList = this.sliceArr(copyGoodList);
      } else {
        let copyJoinList = this.activityListPage;
        this.activityList = this.sliceArr(copyJoinList);
      }
    },
    showInfo(id) {
      this.$router.push({ path: "/space", query: { id: id } });
    },
    goWorkInfo(id) {
      this.$router.push({path: '/workInfo', query: { id: id } });
    },
    goActivityInfo(id) {
      this.$router.push({path: '/activityInfo', query: { id: id } });
    }
  },
};
</script>

<style scoped>
.space {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
}

.bottom {
  font-family: Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  text-align: center;
  font-size: 13px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>